<template>

  <div
    style="width:100%;height:240px;"
    class="dev-wrap"
  >
    <Row>
      <Col span="6">
      <div class="dev-number"><span>&nbsp{{DataSource.devCount}}&nbsp</span>个</div>
      <div class="dev-icon device">设备数</div>
      </Col>
      <Col span="6">
      <div class="dev-number"><span>&nbsp{{DataSource.bdCount}}&nbsp</span>个</div>
      <div class="dev-icon building">子单位</div>
      </Col>
      <Col span="6">
      <div class="dev-number"><span>&nbsp{{DataSource.gcCount}}&nbsp</span>个</div>
      <div class="dev-icon group-company">联网单位</div>
      </Col>
      <Col span="6">
      <div class="dev-number"><span>&nbsp{{DataSource.areaCount}}&nbsp</span>个</div>
      <div class="dev-icon area">区域数</div>
      </Col>

    </Row>

  </div>

</template>

<script>
export default {
  name: "dataSourcePie",
  props: {
    DataSource: {
      type: Object,
      default: function() {
        return { areaCount: 0, gcCount: 0, bdCount: 0, devCount: 0 };
      }
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
  }
};
</script>
<style lang="less">
.dev-number {
  text-align: center;
  color: #a0a0a0;
  line-height: 100px;
  span {
    font-size: 28px;
  }
}
.dev-icon {
  max-width: 110px;
  padding-right: 10px;
  color: #a0a0a0;
  line-height: 40px;
  height: 40px;
  text-align: center;
  padding-left: 30px;
  margin: 0 auto;
}
.device {
  background: url(./../../../../images/device.png) no-repeat left;
  border-right: solid 2px #eeeeee;
}
.building {
  background: url(./../../../../images/building.png) no-repeat left;
  border-right: solid 2px #eeeeee;
}
.group-company {
  background: url(./../../../../images/groupCompany.png) no-repeat left;
  border-right: solid 2px #eeeeee;
}
.area {
  background: url(./../../../../images/area.png) no-repeat left;
}
.dev-wrap {
  padding: 5%;
}

@media screen and (max-width: 1500px) {
  .dev-wrap {
    padding: 5% 1%;
  }
  .dev-icon {
    padding-right: 5px;
    font-size: 12px;
  }
}
</style>
